<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .section{
        position: relative;
        width: 800px;
        height: 400px;
        border: 3px solid pink;
    }
    .left {
        height: 100%;
        width: 400px;
        background-color: green;
    }

    .right {
        width: 400px;
        height: 400px;
        background-color: red;
        position: absolute;
        top: 0;
        right: 0;
    }
    .zoom_left {
        cursor:w-resize;
        width:30px;
        height:30px;
        top: 50%;
        left: -15px;
        transform: translateY(-50%);
        z-index:1;
        position:absolute;
        background: transparent url('./move.png') 30px 30px;
    }
    .move{
        width: 25px;
        position: absolute;
        top: 50%;
        left: -10px;
        transform: translateY(-50%);
        z-index: 999;
    }
</style>
<body>
    <div class="section">
        <div class="left">table</div>
        <div class="right">
            map
        </div>
    </div>
</body>
<script src="./jquery-1.12.4.js"></script>
<script>
    $.fn.extend({
    l_zoom: function (c) {
        this.css("position", "absolute");
        var a = c || "free";
        $(this).attr("l_zoom_mode", a);
        var b = $(
            '<div class="zoom_left"></div>');
        this.append(b);
        $(".zoom_left").mousedown(function (h) { 
            console.log("鼠标按下了");
            var g = $(this);
            var h = event || window.event;
            h.stopPropagation();
            var f = parseInt(g.parent().css("width"));
            var d = {
                x: h.clientX,
                y: h.clientY
            };
            console.log("map盒子初始宽度："+f);
            console.log("start点击位置距离左边的距离："+d.x);
            window.onmousemove = function (i) {
                // console.log("end点击位置距离左边的距离："+i.clientX);
                var i = event || window.event;

                // console.log("第一个if==="+(i.clientX < 400 && i.clientX >= 90));
                // console.log("第二个if==="+(i.clientX >= 400));
                // console.log("第三个if==="+(i.clientX < 90));

                if(i.clientX < 400 && i.clientX >= 90){
                    g.parent().css("width", d.x - i.clientX + f);
                }
            };
            window.onmouseup = function (i) {
                console.log("鼠标弹起来了");
                var i = event || window.event;
                window.onmousemove = null
            }
        });
        return this
    }
});
</script>
<script>
    $('.right').l_zoom('auto');
</script>
</html>